<template>
  <div style="background: #202B61;    width: 96%;height: 82%;text-align: left;position: absolute;margin: 18px;overflow-y: auto;">
    <!-- 顶部tab切换 -->
    <div style="margin-left: 1vh;margin-right: 1vh;top: 1%; width: 99%;background: rgb(46, 60, 133);height: 8vh;float: left;position: absolute;">

      <div id="pageOne" @click="buttonClick('pageOne')"  style="background:#409EFF"  class="buttonStyle">多能流建模与碳排放评估</div>
      <div id="sceneSettingsId" @click="buttonClick('sceneSettings')" class="buttonStyle">场景设置</div>
      <div id="simulationResultId" @click="buttonClick('simulationResult')" class="buttonStyle">仿真结果</div>

     

    </div>

    <div style="margin-left: 1vh;margin-right: 1vh;top: 13.9%; width: 99%;height: auto;float: left;position: absolute;">
      <!--路由页面-->
      <router-view :key="activeDate"></router-view>
    </div>


  </div>
</template>

<script>
  // import "@/assets/css/common.css";
  export default {
    name: 'loadSimulation',
    data () {
      return {
        windowDatate : '',
        activeDate : '',
        projectId : ''
      }
    },
    mounted : function(){

      var projectId = this.$route.query.project_id;
      this.projectId = projectId;

      this.activeDate = new Date().getTime();
      this.$router.push({path:'/pageOne',query:{"projectId":projectId}})
    },
    methods: {

      buttonClick : function(type){

        if(type=="sceneSettings"){
          $("#sceneSettingsId").css("background","#409EFF");
          $("#simulationResultId").css("background","#202B61");

          $("#pageOne").css("background","#202B61");
          $("#pageTwo").css("background","#202B61");
          $("#pageThree").css("background","#202B61");
          $("#pageFour").css("background","#202B61");

        }else if(type=="simulationResult"){
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#409EFF");
          $("#pageOne").css("background","#202B61");
          $("#pageTwo").css("background","#202B61");
          $("#pageThree").css("background","#202B61");
          $("#pageFour").css("background","#202B61");

        } else if(type=="pageOne"){
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#202B61");

          $("#pageOne").css("background","#409EFF");
          $("#pageTwo").css("background","#202B61");
          $("#pageThree").css("background","#202B61");
          $("#pageFour").css("background","#202B61");
      } else if(type=="pageTwo"){
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#202B61");

          $("#pageOne").css("background","#202B61");
          $("#pageTwo").css("background","#409EFF");
          $("#pageThree").css("background","#202B61");
          $("#pageFour").css("background","#202B61");
      } else if(type=="pageThree"){
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#202B61");

          $("#pageOne").css("background","#202B61");
          $("#pageTwo").css("background","#202B61");
          $("#pageThree").css("background","#409EFF");
          $("#pageFour").css("background","#202B61");
      } else if(type=="pageFour"){
        $("#pageFour").css("background","#409EFF");
          $("#sceneSettingsId").css("background","#202B61");
          $("#simulationResultId").css("background","#202B61");

          $("#pageOne").css("background","#202B61");
          $("#pageTwo").css("background","#202B61");
          $("#pageThree").css("background","#202B61");
      }

        this.activeDate = new Date().getTime();

        //路由跳转
        //this.$router.push('/'+type)
        this.$router.push({path:'/'+type,query:{"projectId":this.projectId}})

      }
    }
  }
</script>

<style scoped>


  .buttonStyle {
    height: 5vh;
    width: 20vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor:pointer;
    border-radius: 10px;
    font-family: Arial;
    border:none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #202B61;
    margin: 1.5vh 10px;
    text-align:center;
    line-height:5vh;
    vertical-align: middle;
    text-decoration: none;
  }


</style>
